<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>车辆费用统计</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
<style>
    .layui-body{overflow-y: scroll!important;}
</style>
</head>
<body class="layui-layout-body">





<blockquote class="layui-elem-quote" id="ta" >

    <div class=" layui-form" >
        <div class="layui-form-item"  >

             <div class="layui-input-inline" style="width: 125px" >
            <select name="khSearch"  id="khSearch" lay-filter="khSearch">
                <option value="">客户搜索类型</option>
                <option value="khjc">客户简称</option>
                <option value="khzjm">客户助记码</option>
            </select>
            <select name="qySearch" lay-verify="required" id="qySearch" lay-filter="qySearch">
                <option value="">区域搜索类型</option>
                <option value="qymc">区域名称</option>
                <option value="qyzjm">区域助记码</option>
            </select>
        </div>


            <div class="layui-input-inline"  >
                <select type="text"  class="layui-input" placeholder="请输入" id="serContKh" lay-search><option value="">请选择</option></select>

                <select type="text"  class="layui-input" placeholder="请输入" id="serContQy" lay-search><option value="">请选择</option></select>
            </div>


            <div class="layui-input-inline" style="width: 125px">
                <select name="xlSearch" lay-verify="required" id="xlSearch" lay-filter = "xlSearch" >
                    <option value="">线路搜索类型</option>
                    <option value="xlmc">线路名称</option>
                    <option value="xlzjm">线路助记码</option>
                </select>
            </div>

            <div class="layui-input-inline"  >
                <select type="text"  class="layui-input" placeholder="请输入" id="serContXl" lay-search > <option value="">请选择</option></select>
            </div>

            <div class="layui-input-inline" style="width: 100px">
                <label class="layui-form-label">起始日期</label>

            </div>
            <div class="layui-input-inline">
                <input type="text"  class="layui-input" id="searchQsrqContent">

            </div>
            <div class="layui-input-inline" style="width: 100px">

                <label class="layui-form-label">结束日期</label>
            </div>
            <div class="layui-input-inline">

                <input type="text"  class="layui-input" id="searchJsrqContent">
            </div>

            <div class="layui-input-inline " style=" width:10%; position: absolute;right: 10% ">
                <button class="layui-btn layui-btn-normal" id="tongji">统计</button>

            </div>
            <div class="layui-input-inline " style=" width:10%; position: absolute;right: 5% ">
                <button class="layui-btn layui-btn-normal" id="daochu">导出</button>

            </div>
        </div>
    </div>
</blockquote>

<div class="layui-row">
    <div class="layui-col-xs12">
        <table id="table" lay-filter="Table"></table>
    </div>
</div>

<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['form' ,'table','element','laypage','laydate'], function(){
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var currentPage = 1;
        var tableheight= 'full-130';

        var tablewidth =$("#ta").width();
        var laydate = layui.laydate;
        var tablehead = [[
            {type:'numbers', title: '序号',  align:'center',rowspan:2}
            ,{field: 'xlmc', title: '线路',align:'center',rowspan:2,width:0.036*tablewidth}
            ,{field: 'llcyje', title: '理论充油金额',align:'center',rowspan:2,width:0.069*tablewidth}
            ,{field: 'sjcyje', title: '实际充油金额',align:'center',rowspan:2,width:0.069*tablewidth}
            ,{title: '支出项' ,align:'center',colspan:15}
            ,{title: '收入项' ,align:'center',colspan:6}
            ,{field: 'lirun', title: '利润' ,align:'center',rowspan:2,width:0.036*tablewidth}
        ], [
            {field: 'glf', title: '过路费' ,align:'center',width:0.043*tablewidth}
            ,{field: 'zcjy', title: '节油' ,align:'center',width:0.036*tablewidth}
            ,{field: 'xjjy', title: '现金加油' ,align:'center',width:0.0512*tablewidth}
            ,{field: 'buzhu', title: '线路补助' ,align:'center',width:0.0512*tablewidth}
            ,{field: 'maidan', title: '买单' ,align:'center',width:0.036*tablewidth}
            ,{field: 'wxfycn', title: '维修费用(场内)' ,align:'center',width:0.074*tablewidth}
            ,{field: 'wxfycw', title: '维修费用(场外)' ,align:'center',width:0.074*tablewidth}
            ,{field: 'wzfk', title: '违章罚款' ,align:'center',width:0.0512*tablewidth}
            ,{field: 'tcf', title: '停车费' ,align:'center',width:0.043*tablewidth}
            ,{field: 'zsf', title: '住宿费' ,align:'center',width:0.043*tablewidth}
            ,{field: 'zxf', title: '装卸费' ,align:'center',width:0.043*tablewidth}
            ,{field: 'chuanpiao', title: '船票' ,align:'center',width:0.036*tablewidth}
            ,{field: 'sgcl', title: '事故处理' ,align:'center',width:0.0512*tablewidth}
            ,{field: 'peijian', title: '配件' ,align:'center',width:0.036*tablewidth}
            ,{field: 'zcqt', title: '其他支出' ,align:'center',width:0.0512*tablewidth}
            ,{field: 'srcy', title: '超油' ,align:'center',width:0.036*tablewidth}
            ,{field: 'huihuo', title: '回货' ,align:'center',width:0.036*tablewidth}
            ,{field: 'hhbh', title: '回货补货' ,align:'center',width:0.0512*tablewidth}
            ,{field: 'sryk', title: '油卡' ,align:'center',width:0.036*tablewidth}
            ,{field: 'sryf', title: '运费' ,align:'center',width:0.036*tablewidth}
            ,{field: 'srqt', title: '其他收入' ,align:'center',width:0.0512*tablewidth}
        ]
        ]
        //获取url参数 渲染 权限控制的页面
        if(getQueryVariable("STA") == "false"){
            $("#tongji").attr("disabled",true) ;
            $("#tongji").addClass("layui-btn-disabled");
        }
        if(getQueryVariable("OUT") == "false"){
            $("#daochu").attr("disabled",true) ;
            $("#daochu").addClass("layui-btn-disabled");
        }

//渲染select 搜索

        form.on("select(khSearch)",function (data) {
            if(data.value == "khjc" ){
                $("#serContKh").empty();
                $.ajax({
                    url: contextPath+"/cstmrlist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContKh").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].khjc+ "'>"+res.list[i].khjc+"</option>";
                            $("#serContKh").append(option);
                        };
                        form.render('select');
                    }
                });
            }else if(data.value == "khzjm" ){
                $("#serContKh").empty();
                $.ajax({
                    url: contextPath+"/cstmrlist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContKh").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].khzjm+ "'>"+res.list[i].khzjm+"</option>";
                            $("#serContKh").append(option);
                        };
                        form.render('select');
                    }
                });
            } else{
                $("#serContKh").empty();
            }

        });

        form.on("select(qySearch)",function (data) {
            if(data.value == "qymc" ){
                $("#serContQy").empty();
                $.ajax({
                    url: contextPath+"/arealist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContQy").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].qymc+ "'>"+res.list[i].qymc+"</option>";
                            $("#serContQy").append(option);
                        };
                        form.render('select');
                    }
                });
            }else if(data.value == "qyzjm" ){
                $("#serContQy").empty();
                $.ajax({
                    url: contextPath+"/arealist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContQy").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].zjm+ "'>"+res.list[i].zjm+"</option>";
                            $("#serContQy").append(option);
                        };
                        form.render('select');
                    }
                });
            }else{
                $("#serContQy").empty();
            }

        });

        form.on("select(xlSearch)",function (data) {
            if(data.value == "xlmc" ){
                $("#serContXl").empty();

                $.ajax({
                    url: contextPath+"/roadlist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContXl").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].xlmc+ "'>"+res.list[i].xlmc+"</option>";
                            $("#serContXl").append(option);
                        };
                        form.render('select');
                    }
                });
            }else if(data.value == "xlzjm" ){
                $("#serContXl").empty();
                $.ajax({
                    url: contextPath+"/roadlist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContXl").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].xlzjm+ "'>"+res.list[i].xlzjm+"</option>";
                            $("#serContXl").append(option);
                        };
                        form.render('select');
                    }
                });
            }else{
                $("#serContXl").empty();
            }

        });
        var nowdate = new Date();
        var date = new Date().format("yyyy-MM-dd");
        var preMonth = getPreMonth(date )

        laydate.render({
            elem: '#searchQsrqContent' //指定元素
            ,format:'yyyy-MM-dd'
            ,theme:'#0099FF'
            ,value: preMonth
        });
        laydate.render({
            elem: '#searchJsrqContent' //指定元素
            ,format:'yyyy-MM-dd'
            ,theme:'#0099FF'
            ,value:nowdate
        });
//搜索
        //统计
        $("#tongji").on('click',function(){
            if($("#searchQsrqContent").val() != "" && $("#searchJsrqContent").val() != ""){
                if(!checkEndTime($("#searchQsrqContent").val(),$("#searchJsrqContent").val())){
                    layer.msg("起始日期小于结束日期!");
                }else {
                    var url = contextPath + "/roadcost?"+$("#xlSearch").val()+"="+$("#serContXl").val()+"&"+$("#qySearch").val()+"="+$("#serContQy").val()+"&"+$("#khSearch").val()+"="+$("#serContKh").val()+"&"+"qsrq="+$("#searchQsrqContent").val()+"&"+"jsrq="+$("#searchJsrqContent").val();
                    console.log(url);
                    $.ajax({
                        url: url  ,
                        type: "GET",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            table.render({
                                elem: '#table'
                                ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                                ,data:res.list
                                ,page: {
                                    curr: 1 //重新从第 1 页开始
                                    ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                                ,limit:10
                                ,cellMinWidth: tablewidth
                                , cols: tablehead
                            });
                        }
                    });
                }
            }else if($("#searchQsrqContent").val() != "" && $("#searchJsrqContent").val() == ""){
                layer.msg("结束日期不能为空！");
            }else if($("#searchQsrqContent").val() == "" && $("#searchJsrqContent").val() != ""){
                layer.msg("起始日期不能为空！");
            }
        });




//导出
        $('#daochu').click(function () {
            window.location.href= contextPath + "/roadexcel?"+"xlmczj"+"="+$("#serContXl").val()+"&"+"qymczj"+"="+$("#serContQy").val()+"&"+"khjczj"+"="+$("#serContKh").val()+"&"+"qsrq="+$("#searchQsrqContent").val()+"&"+"jsrq="+$("#searchJsrqContent").val();
        });
        //table实例

        var url = contextPath + "/roadcost?"+$("#xlSearch").val()+"="+$("#serContXl").val()+"&"+$("#qySearch").val()+"="+$("#serContQy").val()+"&"+$("#khSearch").val()+"="+$("#serContKh").val()+"&"+"qsrq="+preMonth+"&"+"jsrq="+getFormatDate();

        console.log(url);
        $.ajax({
            url: url,
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {

                table.render({
                    elem: '#table'
                    ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                    ,data:res.list
                    ,page: {
                        curr: currentPage //重新从第 1 页开始
                        ,layout:['prev', 'page', 'next','skip','count']
                    } //开启分页
                    ,limit:10
                    ,cellMinWidth: tablewidth
                    , cols: tablehead
                    ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currentPage = curr;
                    }
                });
            }

        });




    });





</script>
</body>
</html>